<template>
  <div class="warrper">
    <div class="return" @click="ret">
      <img
        class="saclebtn"
        src="http://assets.rurushishi.com/activies/zdfzh/voice_backindex.png"
        alt
      >
    </div>
    <music></music>
    <Bottom :baseText="baseText"></Bottom>
  </div>
</template>
<script>
import request from "@/utils/request";
import * as config from "./config";
import utils from "@/utils/utils";
import Cookies from "js-cookie";
import { mapState, mapMutations } from "vuex";
import Bottom from "@/components/common/Bottom";
import music from "./components/music";
export default {
  data() {
    return {
      openid: Cookies.get("openid"),
      userInfo: {
        user: {
          nickname: "",
          headimgurl: ""
        }
      }, //用户信息
      // 接收到的传播信息
      receiveSpreadInfo: {
        channel: 0, //渠道
        fuid: "", //传播者的openid
        ouid: "" //销售或渠道的openid
      },
      baseText: config.BASE_TEXT
    };
  },
  components: {
    Bottom: Bottom,
    music
  },
  methods: {
    // 点击返回首页
    ret() {
      // this.gotoUrl("index");
      this.pushUrl("index");
    },
    // 提交分享成功回调
    shareCallBack() {
      let that = this;
      request
        .post(
          `${that.global.API_ACT_URL}share?activityId=${
            config.activityId
          }&openId=${that.openid}`,
          {}
        )
        .then(function(data) {});
    },
    // 跳转本项目的其他链接
    gotoUrl(page) {
      // 带上本页面的传播信息
      let url =
        location.protocol +
        "//" +
        location.host +
        this.global.GLOBAL_BASE_PATH +
        "/";
      if (this.$route.fullPath.indexOf("?") > -1) {
        url += page + "?" + this.$route.fullPath.split("?")[1];
      } else {
        url += page;
      }
      location.href = url;
    },
    // 通过路由方式跳转本项目的其他链接
    pushUrl(page) {
      // 带上本页面的传播信息
      let url = "";
      let fullPathNoShare = this.$route.fullPath;
      fullPathNoShare = fullPathNoShare.replace("?isshare=1", "");
      fullPathNoShare = fullPathNoShare.replace("&isshare=1", "");
      if (fullPathNoShare.indexOf("?") > -1) {
        url = page + "?" + fullPathNoShare.split("?")[1];
      } else {
        url = page;
      }
      this.$router.push("/" + url);
    },
    /**
     * 初始化
     * 1、设置传播传播信息
     * 2、获取用户信息
     * 3、设置分享信息
     */
    init() {
      let that = this;
      // 设置传播信息
      if (this.$route.query.channel)
        this.receiveSpreadInfo.channel = this.$route.query.channel;
      if (this.$route.query.fuid)
        this.receiveSpreadInfo.fuid = this.$route.query.fuid;
      if (this.$route.query.ouid)
        this.receiveSpreadInfo.ouid = this.$route.query.ouid;
      if (this.$route.query.isshare) this.$route.query.isshare = true;
      config.getUserInfo().then(function(userInfo) {
        that.userInfo = userInfo;
        // 设置分享 标题 链接 回调
        let shareObj = {
          title: "",
          link: ""
        };
        if (
          that.userInfo &&
          that.userInfo.user &&
          that.userInfo.user.nickname
        ) {
          shareObj.title = `${
            that.userInfo.user.nickname
          }邀请你跟我一起读语音赢奖品，读出你的“国际范儿”`;
        }

        if (that.userInfo.salerOrAgent) {
          // 是销售或者渠道,更新ouid
          shareObj.link = `${config.SHARE_LINK}?channel=${
            that.receiveSpreadInfo.channel
          }&fuid=${that.openid}&ouid=${that.openid}`;
        } else {
          shareObj.link = `${config.SHARE_LINK}?channel=${
            that.receiveSpreadInfo.channel
          }&fuid=${that.openid}${
            that.receiveSpreadInfo.ouid
              ? "&ouid=" + that.receiveSpreadInfo.ouid
              : ""
          }`;
        }
        config.initShare(shareObj);
        that.global.SHARE_CALLBACK_OK = function(type) {
          that.shareCallBack();
        };
      });
    }
  },
  mounted() {},
  created() {
    this.init();
  }
};
</script>

<style lang="stylus" scoped>
.warrper {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url('http://assets.rurushishi.com/activies/zdfzh/rule_bg2.jpg') repeat center center;
  background-size: 100% 100%;
}

.return {
  position: absolute;
  bottom: 1rem;
  width: 100%;
  text-align: center;
}

.return>img {
  width: 2rem;
}

.saclebtn:active {
  transform: scale(0.9);
}
</style>

